<template>
  <div class="home">
    <div class="tro">
      <span class="tit">医生简介</span>
      <div class="introtext">
        <p>{{brief}}<span class="introBtn" v-if="unfoldshow" @click="unfold = !unfold">{{unfold ? '收起' : '展开'}}</span></p>
      </div>
      <span class="tit">个人成就</span>
      <div class="introtext">
        <p>{{achievement}}<span class="introBtn" v-if="unfoldshow1" @click="unfold1 = !unfold1">{{unfold1 ? '收起' : '展开'}}</span></p>
      </div>
      <span class="tit">科室介绍</span>
      <div class="introtext">
        <p>{{department_brief}}<span class="introBtn" v-if="unfoldshow2" @click="unfold2 = !unfold2">{{unfold2 ? '收起' : '展开'}}</span></p>
      </div>
    </div>
    <ul class="address">
      <li class="tit">出诊信息</li>
      <li>
        出诊医院：
        <span>{{dInf.job_department_name}}</span>
      </li>
      <li>
        门诊时间：
        <span>{{dInf.job_date}}</span>
      </li>
      <li>
        医院地址：
        <span>{{dInf.job_department_address}}</span>
      </li>
      <li>注：具体以线下医疗机构门诊信息为准。</li>
    </ul>
  </div>
</template>

<script>
import { docdata } from "../api/captch";
export default {
  name: "introhome",
  data() {
    return {
      dInf: {
        brief:"",
        achievement:"",
        department_brief:""
      },
      textcontent: "",
      unfold: false,
      unfoldshow: false,
      unfold1: false,
      unfoldshow1: false,
      unfold2: false,
      unfoldshow2: false
    };
  },
  props:["doctor_id"],
  created() {
    this.docontent();
  },
  computed: {
    brief() {
      if (!this.dInf.brief.length) return "暂无信息";
      if (!this.unfold) {
        if (this.dInf.brief.length > 65) {
          this.unfoldshow = true;
          return this.dInf.brief.slice(0, 65) + "...";
        } else {
          return this.dInf.brief;
          this.unfoldshow = false;
        }
      } else {
        return this.dInf.brief;
      }
    },
    achievement() {
      if (!this.dInf.achievement.length) return "暂无信息";
      if (!this.unfold1) {
        if (this.dInf.achievement.length > 65) {
          this.unfoldshow1 = true;
          return this.dInf.achievement.slice(0, 65) + "...";
        } else {
          return this.dInf.achievement;
          this.unfoldshow1 = false;
        }
      } else {
        return this.dInf.achievement;
      }
    },
    department_brief(){
      if (!this.dInf.department_brief.length) return "暂无信息";
      if (!this.unfold2) {
        if (this.dInf.department_brief.length > 65) {
          this.unfoldshow2 = true;
          return this.dInf.department_brief.slice(0, 65) + "...";
        } else {
          return this.dInf.department_brief;
          this.unfoldshow2 = false;
        }
      } else {
        return this.dInf.department_brief;
      }
    },
  },
  methods:{
    //卡片信息
    docontent() {
      docdata(this.doctor_id,{
        url:window.location.href.split('&')[0]
      }).then(res => {
        console.log(res.data);
        this.dInf = res.data.cards;
        this.shows = true;
      });
    }
  }
};
</script>
<style scoped>
.tit {
  font-weight: 600;
  padding: 20px 0 10px;
}
.tro {
  padding: 30px 30px 1px;
  line-height: 43px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
.tro p {
  margin:10px 0 30px;
}
.address {
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  padding: 10px 30px 30px;
  color: #666666;
  margin-bottom: 60px;
}
.address .tit {
  font-size: 32px;
}
.address > li {
  line-height: 45px;
}
.address > li:last-child {
  font-size: 24px;
  color: #999999;
}
.address span {
  font-weight: bold;
}
.introtext {
  position: relative;
}
.introBtn {
  margin-left:35px;
  color: #999999;
}

</style>